<template>
	<view :class="'theme-'+theme">
	<view class="addTitle">
		<view class="titleDetail">
			<view class="titleLeft" > 
				<image src="../../static/newh5/fanhui.png" 
				class="yticon" 
				style="width: 13px;height: 20px;color:black" 
				@click="returnIndex()"
				></image>
			</view>
			<view class="titleCenter" >
			<b class="titleText">意见反馈</b>
			</view>
			<view class="titleRight"  style="color: #269cd3;flex:1" > </view>
		</view>
		</view>
		<view class="input-content">
			<view class="form-style">
				<view class="uni-textarea">
					<textarea v-model="context" maxlength="200" class="form-font" :placeholder='placeholder'></textarea>
				</view>
	
				<view style="padding: 40rpx; justify-content: space-between; ">
					<u-upload
					width="160" height="160"
					:action="uploadPath"
					:max-size="maxSize"
					:max-count="maxCount"
					:source-type="sourceType"
					@on-uploaded="onUploadSuccess($event)"
					@on-remove="onUploadSuccess($event)"
					:show-progress="true"
					:header="headers"/>
					<!-- <uImg ref="upimg" 
					:canUploadFile="true" 
					:limit="limitNum" 
					:uploadFileUrl="uploadFileUrl"
					:header="headers" 
					:fileKeyName="name" 
					:uImgList.sync="uImgList" @uploadSuccess="uploadSuccess" /> -->
						<view  class="computeNum">
							{{computeLength}}
						</view>
				</view>
				

			</view>

			<view>
				<input class="form-style  form-font" v-model="contact" style="height: 40px;line-height:40px" placeholder="请输入电子邮箱/联系电话" />
				<button type='warn' class="top themeBgColor" @click="upFile">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
	import uImg from '@/components/zhtx-uploadImg/zhtx-uploadImg.vue';
	import { addFeedBack } from "../../api/set/set.js";
	import {
		baseURL,
		serv
	} from '../../common/utils/config.js'
	export default {
		components: {
			uImg
		},
		data() {
			return {
				msg: '',
				context:'',
				contact:'',
				fileIds:[],
				length: 200,
				fileIds:'',
				fileContent:[],
				maxSize:10*1024*1024,
        		maxCount:3,
				sourceType:['album', 'camera'],
				placeholder: '请填写您遇到的问题或者意见,感谢您的支持',
				limitNum: 1,
				uploadPath: baseURL + serv.fsdsrest + '/api/fdfs/file/upload', //替换成你的后端接收文件地址
				headers: {
					Authorization: 'Bearer ' + uni.getStorageSync('token')
				},
				name: '', //上传的名字
				header: { // 如果需要header，请上传
				},
				uImgList: [],
				uImgList1: []
			}
		},
		onLoad(){
			console.log('baseURL',baseURL+serv.fsdsrest);
		},
		computed: {
			computeLength() {
				return this.length = 200 - this.msg.length
			}
		},
		methods: {
		returnIndex() {
				goback()
			},
		onUploadSuccess(file){
			console.log('file',file);
			let newFileList = [];
			//后台传输使用fileIds即可 
			file.forEach(item=>{
				if(item.response.code == 0){
					newFileList.push(item.response.data.storageFileId)
				}else{
					this.$util.msg(item.response.message)
					return false
				}
			})
			console.log('组装的文件ids',newFileList);
			this.fileIds = newFileList.toString()
			console.log('待提交的ids',this.fileIds);
			// this.$set(this.currProductFiles,this.currUploadItemId,newFileList)
			// this.$set(this.noteList,this.currUploadItemId,'您共上传了'+file.length+'张，还可以上传'+(6-file.length).toString()+'张')

      	},
		uploadSuccess(result) {
				if (result.statusCode == 200) {
					//上传成功的回调处理
					toast('上传成功')
				} else {
					toast('上传失败')
				}
			},
			//不加入路由堆栈
			navToBack(url){
				uni.redirectTo({
					url
				})
			},
			upFile() {
				// this.$refs.upimg.upload()
				let fids = []
				// let fidString = ''
				// this.fileContent.forEach(item=>{
				// 	fids.push(item.id)
				// })
				// if(fids.length!=0)fidString = fids.toString();
				if(this.context==''){
					this.$util.msg('意见填写不得为空')
					return false
				}
				const params = {
					//反馈内容
					context:this.context,
					//电子联系方式
					contact: this.contact,
					//图片id
					fileIds:this.fileIds
				};
				console.log('params',params);
				addFeedBack(params).then((res) => {
				    if (res.code === 0) {
				      console.log("后台信息", res);
					  this.context = ''
					  this.contact = ''
					  this.fileContent = []
					  this.fileIds = ''
					  this.$util.msg(res.message == "success"?'提交成功':'提交失败' )
					  setTimeout(() => {
						  	this.navToBack('/pages/set/set')
							// uni.navigateTo({
							// 	url:`/pages/set/set`
							// })
						}, 400)
				    }
				  });
				
			}
		},
	}
</script>

<style lang="scss">
	.input-content {
		padding: 30upx;
		padding-top: 10rpx;
	}

	.textarea {
		padding: 20px;
		/* font-size: 12px; */
	}

	.form-style {
		border: 1px solid #CCCCCC;
		border-radius: 4px;
		margin-bottom: 10px;
	}

	.form-font {
		font-size: 14upx;
	}

	.top {
		margin-top: 30upx;
		// background-color: $my-newh5-color;
	}

	.computeNum {
		color: #ccc;
		float: right;
		padding-right: 10px;
		font-size: 14px;
	}
</style>
